Skip to content

[8주차/카사] 워크북 제출합니다.#85

Open
jjeunv wants to merge 5 commits into
UMC-Inha:카사/mainfrom
jjeunv:main
Open

[8주차/카사] 워크북 제출합니다.#85
jjeunv wants to merge 5 commits into
UMC-Inha:카사/mainfrom
jjeunv:main

Conversation

@jjeunv
Copy link
Copy Markdown
Member

@jjeunv jjeunv commented May 21, 2026 •
edited
Loading

✅ 워크북 체크리스트

  • 모든 핵심 키워드 정리를 마쳤나요?
  • 핵심 키워드에 대해 완벽히 이해하셨나요?
  • 이론 학습 이후 직접 실습을 해보는 시간을 가졌나요?
  • 미션을 수행하셨나요?
  • 미션을 기록하셨나요?

✅ 컨벤션 체크리스트

  • 디렉토리 구조 컨벤션을 잘 지켰나요?
  • pr 제목을 컨벤션에 맞게 작성하였나요?
  • pr에 해당되는 이슈를 연결하였나요?(중요)
  • 적절한 라벨을 설정하였나요?
  • 파트장에게 code review를 요청하기 위해 reviewer를 등록하였나요?
  • 닉네임/main 브랜치의 최신 상태를 반영하고 있는지 확인했나요?(매우 중요!)

📌 주안점

미션 3의 배경 스크롤 방지 항목 구현 중에 궁금한 점이 생겼습니다 ❗❗ ◑﹏◐

일반적으로 사이드바가 열렸을 때 배경 스크롤을 막는 것이 UX 관점에서 권장되는 패턴이라고 적혀있었는데,
저는 미션을 진행하면서 오히려 사이드바를 탐색하면서 배경 콘텐츠도 함께 스크롤할 수 있는 편이 더 자연스러울 수 있다고 생각했습니다. §(￣▽￣)§

여러분은 생각은 어떤지 궁금합니다~.~ 사이드바가 열렸을 때 배경 스크롤을 막는 것이 더 나은 UX라고 생각하시나요? 👀

@jjeunv jjeunv self-assigned this May 21, 2026
@jjeunv jjeunv requested a review from qkrdmsthff as a code owner May 21, 2026 05:00
@jjeunv jjeunv linked an issue May 21, 2026 that may be closed by this pull request
Chapter08_Debouncing & Throttling #75
Open
12234538
12234538 reviewed May 24, 2026
View reviewed changes
Comment thread mission/chapter08/mission01/src/hooks/useDebounce.ts
@@ -0,0 +1,15 @@
import { useEffect, useState } from "react"
Copy link
Copy Markdown

@12234538 12234538 May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

debounce를 처음 들어봐서 어떻게 코드를 짜야할지 잘 몰랐는데 카사 코드가 깔끔해서 참고하기 좋을 것 같아요!

@seohyeon0219
Copy link
Copy Markdown

seohyeon0219 commented May 24, 2026 •
edited
Loading

카사 말을 듣고 저도 찾아봤는데,
원래는 사이드바가 열리면 배경 스크롤을 막는 이유에는

  • 사용자의 집중을 사이드바로 유도
  • 뒤 페이지가 의도치 않게 움직이는 것을 방지
  • 사이드바가 화면을 덮고 있는데 뒤 배경이 움직이면 시각적으로 어색하고 완성도가 떨어져보이는 문제

등등이 있다구 하더라구요!

그런데 제 생각에는 현재 구조에서 데스크탑과 모바일일 때의 사이드바 역할이 조금 다르다고 느꼈습니다.
데스크탑에서 페이지를 로드하면 기본적으로 사이드바가 열린 상태인 반면,
모바일/협소 화면에서 사이드바가 숨김처리되고 필요할 때만 열리며, 사이드바를 열면 배경이 어두워지는 CSS 효과가 있습니다.

정리해보면 아래와 같이 차이점이 있을 것 같아요.

모바일 사이드바 데스크탑 사이드바
형태 오버레이 (메인 위에 뜸) 고정 (메인 옆에 나란히)
메인과의 관계 메인을 가림 메인과 공존
스크롤 잠금 필요 필요 불필요
기본 상태 닫힘 열림

데스크탑의 경우 스크롤을 막아버리면 사용자는 메인 컨텐츠를 보려고 할 때마다 사이드바를 닫아야 해 UX적으로 불편함이 있을 것 같습니다.

그래서 제 생각에는 모바일(오버레이형)에서는 스크롤을 잠그고, 데스트탑(고정형)에서는 스크롤 잠금을 해제하는 방향이 좋아보입니다!

구현은 CSS 미디어쿼리를 이용해 아래처럼 코드를 작성하면 좋을 것 같습니다!

useEffect(() => {
  if (isOpen) {
    document.body.classList.add('sidebar-open');
  } else {
    document.body.classList.remove('sidebar-open');
  }
  return () => {
    document.body.classList.remove('sidebar-open');
  };
}, [isOpen]);

/* 모바일에서만 적용 */
@media (max-width: 767px) {
  body.sidebar-open {
    overflow: hidden;
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@12234538 12234538 12234538 left review comments

@qkrdmsthff qkrdmsthff Awaiting requested review from qkrdmsthff qkrdmsthff is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@jjeunv jjeunv

Labels

chapter08 keyword mission practice

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Chapter08_Debouncing & Throttling

3 participants

@jjeunv @seohyeon0219 @12234538